fix(ui): Simple theme checkbox styles by alexcarpenter · Pull Request #8922 · clerk/javascript

alexcarpenter · 2026-06-18T20:52:24Z

Description

Fixes an issue in simple theme usage where checkboxes where not preserving their default styles.

BEFORE	AFTER

BEFORE

before.mov

AFTER

after.mov

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

vercel · 2026-06-18T20:52:31Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 18, 2026 8:52pm
swingset	Ready	Preview, Comment	Jun 18, 2026 8:52pm

changeset-bot · 2026-06-18T20:52:37Z

🦋 Changeset detected

Latest commit: 6c6d9e1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-06-18T20:52:41Z

📝 Walkthrough

Walkthrough

Checkbox appearance is fixed for the simple theme by injecting custom CSS into the Input primitive for type=checkbox inputs and extracting a checkboxBaseStyles helper in baseTheme.ts. A width: 'fit-content' rule is removed from CheckboxIndicator, and a patch changeset entry is added.

Changes

Checkbox Default Styling

Layer / File(s)	Summary
Checkbox styles in Input primitive and CheckboxIndicator fix `packages/ui/src/primitives/Input.tsx`, `packages/ui/src/elements/FieldControl.tsx`	`Input` base style gains a conditional block for `type=checkbox` that removes native appearance, sets fixed dimensions, configures background rendering, and defines a `:checked` SVG state with `$primary500` background. `borderRadius` in the default variant is restricted to checkbox inputs. `CheckboxIndicator` drops its `width: 'fit-content'` rule.
`checkboxBaseStyles` helper extraction in baseTheme `packages/ui/src/baseTheme.ts`, `.changeset/kind-melons-own.md`	New `checkboxBaseStyles(theme)` helper centralizes checkbox layout and `:checked` appearance. `clerkTheme.elements.checkbox` is refactored to spread this helper while keeping neutral shadow styling and a `borderColor: $transparent` override. Patch changeset entry added for `@clerk/ui`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

ui

Suggested reviewers

kylemac

Poem

🐇 A checkbox once plain, now styled with care,
SVG checkmarks floating in the air,
No fit-content width to cause a fuss,
The simple theme now renders right for us!
Hop hop hooray for cleaner style—
This little patch is worth the while! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing checkbox styling in the simple theme for the UI package.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-06-18T20:55:33Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8922

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8922

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8922

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8922

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@8922

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8922

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8922

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8922

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8922

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8922

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8922

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8922

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8922

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8922

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8922

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8922

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8922

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8922

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8922

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8922

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8922

commit: 6c6d9e1

github-actions · 2026-06-18T20:56:05Z

API Changes Report

Generated by Break Check on 2026-06-18T20:56:02.377Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

_{Last ran on 6c6d9e1.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/primitives/Input.tsx`:
- Around line 30-33: The theme.colors.$white value is being interpolated
unescaped into the SVG data URI within the checked state styles in the Input.tsx
file. If this color resolves to a hex value like `#fff`, the # character will
break the URI syntax. URL-encode the theme.colors.$white interpolation before
inserting it into the data URI string using appropriate URL encoding (e.g.,
encodeURIComponent) to ensure special characters like # are properly escaped.
Apply the same URL-encoding fix to the corresponding color interpolation in
baseTheme.ts where similar SVG data URIs are defined.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: b4511a5f-26bb-4844-b752-2d6440bbfe0c

📥 Commits

Reviewing files that changed from the base of the PR and between 15b059c and 6c6d9e1.

📒 Files selected for processing (4)

.changeset/kind-melons-own.md
packages/ui/src/baseTheme.ts
packages/ui/src/elements/FieldControl.tsx
packages/ui/src/primitives/Input.tsx

💤 Files with no reviewable changes (1)

packages/ui/src/elements/FieldControl.tsx

dmoerner

👍 Thank you!

alexcarpenter added 2 commits June 18, 2026 16:46

fix(ui): Simple theme checkbox styles

2954023

add changeset

6c6d9e1

github-actions Bot added the ui label Jun 18, 2026

coderabbitai Bot reviewed Jun 18, 2026

View reviewed changes

Comment thread packages/ui/src/primitives/Input.tsx

dmoerner approved these changes Jun 18, 2026

View reviewed changes

alexcarpenter merged commit 08c6cfc into main Jun 18, 2026
53 checks passed

alexcarpenter deleted the carp/fix-simple-theme-checkbox branch June 18, 2026 21:53

clerk-cookie mentioned this pull request Jun 18, 2026

ci(repo): Version packages #8914

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): Simple theme checkbox styles#8922

fix(ui): Simple theme checkbox styles#8922
alexcarpenter merged 2 commits into
mainfrom
carp/fix-simple-theme-checkbox

alexcarpenter commented Jun 18, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 18, 2026

Uh oh!

changeset-bot Bot commented Jun 18, 2026

Uh oh!

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Jun 18, 2026

Uh oh!

github-actions Bot commented Jun 18, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

dmoerner left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

alexcarpenter commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

vercel Bot commented Jun 18, 2026

Uh oh!

changeset-bot Bot commented Jun 18, 2026

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Jun 18, 2026

Uh oh!

github-actions Bot commented Jun 18, 2026

API Changes Report

Summary

No API Changes Detected

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dmoerner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexcarpenter commented Jun 18, 2026 •

edited

Loading

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading